<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
    <div class="w-2/3 m-5">
      <Select v-model:value="selectedValue" class="w-full">
        <SelectOption v-for="item in options" :value="item.value" :key="item.value">
          {{ item.label }}
        </SelectOption>
      </Select>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Select } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  interface DataList {
    label: string;
    value: string;
  }

  export default defineComponent({
    name: 'SelActionModal',
    components: { BasicModal, Select, SelectOption: Select.Option },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const isUpdate = ref(true);
      const options = ref([]);
      const selectedValue = ref('');
      const { createMessage } = useMessage();

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        setModalProps({ confirmLoading: false, width: '50%', minHeight: 80 });
        // isUpdate.value = !!data?.isUpdate;
        options.value = data.options || [];
        if (data.userRealName) {
          const record = options.value.find((item) => item.label == data.userRealName);
          selectedValue.value = record?.value;
        } else {
          selectedValue.value = '';
        }
      });

      const getTitle = '选择节点';

      async function handleSubmit() {
        try {
          setModalProps({ confirmLoading: true });
          console.log('selectedValue.value', selectedValue.value);
          if (!selectedValue.value) {
            createMessage.warning('选择数据不能为空');
            return;
          }
          const selectedModel: any = options.value.find(
            (item: any) => item.value == selectedValue.value,
          );
          console.log('selectedModel', selectedModel);
          const params = {
            value: selectedModel?.value,
            label: selectedModel?.label,
          };
          closeModal();
          emit('success', params);
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      const filterOption = (inputValue: string, option: DataList) => {
        return option.label.indexOf(inputValue) > -1;
      };

      return {
        registerModal,
        getTitle,
        handleSubmit,
        filterOption,
        options,
        selectedValue,
      };
    },
  });
</script>
